<template>
  <div class="debug-visible-ui">
    <t-drawer
      v-model:visible="visibleUI"
      :header="false"
      :on-overlay-click="() => (visibleUI = false)"
      :close-btn="true"
      :footer="false"
      :size="type === 3 ? 'medium' : 'small'"
      @cancel="visibleUI = false"
    >
      <div class="debug-visible-ui-tips">
        <span v-if="type == 1">{{ data.bookName }}</span>
        <span v-else-if="type == 3">{{ data.catalogName }}</span>
        <span v-else>共查询到 {{ data.length }} 条数据</span>
      </div>
      <div class="debug-visible-ui-body">
        <div v-if="type === 3" class="content-ui">
          <div class="list">
            <div class="url">{{ data.catalogUrl }}</div>
            <div v-for="(item, key) in list" :key="key" class="item">{{ item }}</div>
          </div>
        </div>
        <!-- 书本详情 -->
        <div v-else-if="type === 1" class="search-ui bookinfo-ui">
          <div class="search-ui-body">
            <div class="search-ui-body__image">
              <steve-image :src="data.coverImage" />
            </div>
            <div class="search-ui-body__content">
              <div class="search-ui-body__content__desc">
                <span>{{ data.author }}</span>
              </div>
              <div class="search-ui-body__content__desc">
                <span>{{ data.category }}</span>
              </div>
            </div>
          </div>
          <div class="bookinfo-ui__info url">
            <span v-if="data.url">章节列表地址：{{ data.url }}</span>
            <span v-else>未获取到章节列表地址</span>
          </div>
          <div class="bookinfo-ui__info">
            <span>{{ data.detail }}</span>
          </div>
        </div>
        <t-list v-else size="small" split>
          <t-list-item v-for="(item, key) in list" :key="key">
            <!-- 搜索 -->
            <div v-if="type === 0" class="search-ui">
              <div class="search-ui-body">
                <div class="search-ui-body__image">
                  <steve-image :src="item.coverImage" />
                </div>
                <div class="search-ui-body__content">
                  <div class="search-ui-body__content__title">
                    <span>{{ item.bookName }}</span>
                  </div>
                  <div class="search-ui-body__content__desc">
                    <span>{{ item.author }}</span>
                  </div>
                  <div class="search-ui-body__content__desc">
                    <span>{{ item.category }}</span>
                  </div>
                  <div class="search-ui-body__content__url">
                    <span>{{ item.url }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 章节 -->
            <div v-if="type === 2">
              <div class="chapter-ui-body">
                <div class="chapter-ui-body__name">{{ item.catalogName }}</div>
                <div class="chapter-ui-body__url">{{ item.catalogUrl }}</div>
              </div>
            </div>
          </t-list-item>
        </t-list>
      </div>
    </t-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';

import SteveImage from '@/components/steveImage/index.vue';

const props = defineProps({
  // 是否可见
  visible: {
    type: Boolean,
    default: false,
  },
  // 类型，0search、1bookInfo、2chapter、3content
  type: {
    type: Number,
    default: 0,
  },
  // 数据
  data: {
    type: Object,
    default: null,
  },
});

// 事件
const emit = defineEmits(['update:visible']);

// 可视UI
const visibleUI = ref(false);
const { visible, data } = toRefs(props);
watch(visible, (v) => {
  visibleUI.value = v;
});

// 通知 visible
watch(visibleUI, (v) => {
  emit('update:visible', v);
});

const list = ref();
watch(data, (v) => {
  if (props.type === 3) {
    if (v.contents) {
      list.value = JSON.parse(v.contents);
    }
  } else {
    list.value = v;
  }
});
</script>

<style lang="less" scoped>
.debug-visible-ui {
  :deep(.t-drawer) {
    &__body {
      padding: 0 !important;
    }
  }

  &-tips {
    border-bottom: 1px solid var(--td-component-stroke);
    background: var(--td-bg-color-page);
    height: var(--td-comp-size-m);
    font-size: var(--td-font-size-body-small);
    padding: 0 var(--td-comp-paddingTB-s);
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
  }

  &-body {
    margin-top: var(--td-comp-size-m);
  }

  .search-ui {
    width: 100%;

    &-body {
      display: flex;
      justify-content: space-between;

      &__image {
        margin-right: var(--td-comp-margin-s);
        width: 60px;
      }

      &__content {
        flex: 1;

        &__title {
          font-size: var(--td-font-size-title-small);
        }

        &__desc {
          font-size: var(--td-font-size-body-small);
          color: var(--td-gray-color-7);
        }

        &__url {
          font-size: var(--td-font-size-body-small);
          color: var(--td-gray-color-7);
          word-break: break-all;
        }
      }
    }

    &-option {
      margin-top: var(--td-comp-margin-s);
    }
  }

  .bookinfo-ui {
    padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m);

    &__info {
      font-size: var(--td-font-size-body-small);
      color: var(--td-gray-color-7);
      word-break: break-all;
    }

    .url {
      font-size: var(--td-font-body-small);
      color: var(--td-brand-color);
    }
  }

  .chapter-ui {
    &-body {
      &__name {
        font-size: var(--td-font-size-title-small);
      }

      &__url {
        font-size: var(--td-font-size-body-small);
        color: var(--td-gray-color-7);
        word-break: break-all;
      }
    }
  }

  .content-ui {
    .list {
      padding: var(--td-comp-paddingLR-l);

      .url {
        font-size: var(--td-font-body-small);
        color: var(--td-brand-color);
      }

      .item {
        font-size: var(--td-font-body-medium);
        text-indent: var(--td-line-height-title-large);
        margin-top: var(--td-comp-margin-s);
      }
    }
  }
}
</style>
